import React, { Component } from "react";

export default class App extends Component {
  a = "name";
  render() {
    return (
      <section>
        <input style={{ marginRight: "10px" }} type="text" />
        <button
          style={{ marginRight: "10px" }}
          onClick={() => {
            // 可以正常打印,因为this指向的是app实例
            console.log("click1", this.a);
          }}
        >
          点击1
        </button>
        {/* 必须加bind,因为this指向的是点击2按钮,call跟apply因为会立即执行函数,只有bind返回的是当前这个函数不会立即执行*/}
        <button
          style={{ marginRight: "10px" }}
          onClick={this.handleClick2.bind(this)}
        >
          点击2
        </button>
        {/* 可以访问,因为handleClick3是箭头函数,this指向是上下文的this */}
        <button style={{ marginRight: "10px" }} onClick={this.handleClick3}>
          点击3
        </button>
        <button
          style={{ marginRight: "10px" }}
          onClick={
            () => this.handleClick4()
            // 最推荐的是这个方法
            // 这里的this可以正常访问,因为这里的this指向的是app实例,而不是按钮,handleclick4不管是什么函数都是可以访问到this.a
          }
        >
          点击4
        </button>
      </section>
    );
  }
  handleClick2() {
    console.log("click2", this.a);
  }
  handleClick3 = () => {
    console.log("click3", this.a);
  };
  //   推荐使用这个
  handleClick4 = () => {
    console.log("click4", this.a);
  };
}
